<template>
  <div>
    <el-container>
      <el-main id="mainScreen">
        <!--        操作栏-->
        <div>
          <el-button type="primary" @click="add">新增产品</el-button>

          <el-input placeholder="请输入内容" v-model="searchData" style="width: 25%" clearable></el-input>
          <el-button type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
          <el-button type="text" @click="del()">
            <el-popover placement="top-start" trigger="hover" content="删除选中行">
              <font-awesome-icon :icon="['far', 'trash-alt']" slot="reference" size="2x"></font-awesome-icon>
            </el-popover>
          </el-button>
          <el-button @click="refreshClick()" type="text">
            <el-popover placement="top-start" trigger="hover" content="刷新页面">
              <font-awesome-icon :icon="['fas', 'sync-alt']" slot="reference" size="2x"></font-awesome-icon>
            </el-popover>
          </el-button>
          <el-button type="text" @click="push()">
            <el-popover placement="top-start" trigger="hover" content="推送">
              <font-awesome-icon :icon="['far', 'paper-plane']" slot="reference" size="2x"></font-awesome-icon>
            </el-popover>
          </el-button>
          <el-button type="text">
            <ScreenFull></ScreenFull>
          </el-button>

        </div>
        <!--        表格主体-->
        <div>
          <Main :products="products" :property="property" ref="main" @handleSelection="handleSelection" ></Main>
        </div>
        <!--       分页条-->
        <div class="block">
          <el-pagination
            :hide-on-single-page="hidePage"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100, 200]"
            :page-size.sync="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </el-main>
    </el-container>
    <!--    新增产品组件-->
    <el-dialog title="新增产品" :visible.sync="addDialogVisible" width="50%" v-if="refresh">
      <div>
        <Add  @conserve="conserve" @close="close" :property="property"></Add>
      </div>
    </el-dialog>
    <!--    上传图片-->
    <el-dialog title="上传图片" :visible.sync="pictureDialogVisible" width="50%" v-if="refreshPicture">
      <div>
        <UploadPicture :insertProduct="insertProduct" @closePicture="closePicture"></UploadPicture>
      </div>
    </el-dialog>
  </div>
</template>

<script>
//导入子组件
import Main from "./product/main";
import Add from "./product/add";
import ScreenFull from "../screenFull";
import UploadPicture from "./product/uploadPicture";

export default {
  name: "product",
  inject:['reload'],  //注入inject依赖提供刷新
  components:{
    ScreenFull,
    Main,
    Add,
    UploadPicture
  },
  data() {
    return {
      products: [],
      insertProduct:{},
      temp: null,
      //产品字段
      property:{
        productLines: [],
        categories: [],
        serieses: [],
        sizes:[
          {
            id:1,
            name:12
          },
          {
            id:2,
            name:14
          },
        ],
        colors:[
          {
            id:1,
            name:"金色"
          },
          {
            id:2,
            name:"银色"
          },
          {
            id:3,
            name:"绿色"
          }
        ],
        technologies:[
          {
            id:1,
            name:"花丝"
          },
          {
            id:2,
            name:"点翠"
          },
          {
            id:3,
            name :"烧蓝"
          },
          {
            id:4,
            name:"点寞"
          }
        ],
        shapes:[
          {
            id:1,
            name:"心形"
          },
          {
            id:2,
            name:"圆形"
          }
        ],
        materials:[
          {
            id:1,
            name:"足金"
          },
          {
            id:2,
            name:"合金"
          },
          {
            id:3,
            name:"银"
          },
          {
            id:4,
            name:"翡翠"
          }
        ],
        purities:[
          {
            id:1,
            name:"万足金"
          },
          {
            id:2,
            name:"千足金"
          },
          {
            id:3,
            name:"18K金"
          },
          {
            id:4,
            name:"14K金"
          },
          {
            id:5,
            name:"足银"
          },
          {
            id:6,
            name:"帝王种"
          }
        ],
        packings:[
          {
            id:1,
            name:"简约包装"
          },
          {
            id:2,
            name:"豪华礼盒装"
          }
        ],
        purposes:[
          {
            id:1,
            name:"婚嫁"
          },
          {
            id:2,
            name:"商务"
          },
          {
            id:3,
            name:"生日"
          }
        ],
        services:[
          {
            id:1,
            name:'支持回购'
          },
          {
            id:2,
            name:'以旧换新'
          }
        ],
      },
      //添加产品对话框
      addDialogVisible:false,
      refresh:false,
      date:new Date(),
      hidePage:true,
      currentPage: 1,
      limit:10,
      total:0,
      searchData:'',
      multipleSelection:[],
      //记录删除多个数据的id，后台删除
      delId:[],
      //记录删除多个数据的index，前台删除
      delIndex:[],
      //显示图片上传对话框
      refreshPicture:false,
      pictureDialogVisible:false,


    }
  },
  created() {
    //得到字段信息
    this.axios.get(this.baseUrl+"product/findAllProperty")
      .then(res=>{
        console.log(res.data);
        this.property.productLines = res.data.data.productLines;
        this.property.categories = res.data.data.categories;
        this.property.serieses = res.data.data.serieses;
      })
    //重置页码和分页数
    this.currentPage = 1;
    this.limit = 10;
    this.hidePage = true;
    this.status = -1;
    this.axios.get(this.baseUrl+"product/all/"+this.currentPage+"/"+this.limit)
      .then(res=>{
        console.log(res.data);
        this.products = res.data.data.list;
        this.total = res.data.data.total
      });

  },
  methods: {
    /*handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },*/

    //新增
    add(){
      this.refresh = true;
      this.addDialogVisible = true
    },
    //保存新增
    conserve(product){
      console.log(product);
      //设置id,根据此修改数据库
      product.productLineId = product.productLine
      product.categoryId = product.category
      product.seriesId = product.series
      product.series = null
      product.category = null
      product.productLine = null
      this.axios.post(this.baseUrl+"product/insert",product)
        .then(res=>{
          console.log(res.data);
          if("success"===res.data.message){
            this.$message({
              type: 'success',
              message: "新增产品成功，请为该产品添加图片信息"
            });
            this.insertProduct = res.data.data;
          }else {
            this.$message({
              type: 'warning',
              message: "新增产品失败，请联系管理员"
            });
          }
        });
      this.refresh = false;
      this.addDialogVisible = false;
      //开启图片上传对话框
      this.refreshPicture = true;
      this.pictureDialogVisible = true;
    },
    //退出新增
    close(){
      this.$confirm('此操作会清空当前所做的修改，请确定是否继续退出？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //关闭对话框
        this.addDialogVisible = false;
        //销毁对话框
        this.refresh = false;
        //
        this.$message({
          type: 'success',
          message: '退出成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    //退出增加图片
    closePicture(){
      this.$confirm('此操作会清空未上传的图片，请确定是否继续退出？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //关闭对话框
        this.pictureDialogVisible = false;
        //销毁对话框
        this.refreshPicture = false;
        //刷新
        this.reload()
        this.$message({
          type: 'success',
          message: '退出成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    //选中的多行数据
    handleSelection(multipleSelection){
      this.multipleSelection = multipleSelection;
    },
    //删除多条数据
    del(){
      console.log(this.multipleSelection)
      if(this.multipleSelection.length !== 0){
        this.$confirm('将删除全部所选中行，是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //遍历两个数组，删除相同元素（即被选中的元素）
          for (let i = 0; i < this.products.length; i++) {
            for (let j = 0; j < this.multipleSelection.length; j++) {
              if(this.products[i].id === this.multipleSelection[j].id){
                //将所需删除元素的index存入数组delIndex
                this.delIndex.push(i);
                //将所需删除元素的id存入数组delId
                this.delId.push(this.products[i].id);
              }
            }
          }
          //删除后台数据
          console.log("删除")
          this.axios.delete(this.baseUrl+"product/del/"+this.delId.toString())
            .then(res=>{
              console.log(res.data);
              if("success"===res.data.message){
                this.$message({
                  type: 'success',
                  message: res.data.data
                });
              }else {
                this.$message({
                  type: 'warning',
                  message: res.data.data
                });
              }
            });
          //删除前台数据，反向遍历delIndex
          for (let i = this.delIndex.length - 1; i >= 0; i--) {
            this.products.splice(this.delIndex[i], 1)
          }
          //刷新页面
          this.reload();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      }else{
        this.$alert('未选中数据！请选择所需删除的行之后重试！', '警告', {
          confirmButtonText: '确定',
        });
      }
    },
    //搜索
    search(){
    },
    push(){
      console.log(this.multipleSelection)
    },
    //刷新
    refreshClick(){
      this.reload();
    },
    //分页数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      //更改条数
      this.limit = val;
      //如果不为10，不隐藏条码
      if(val !== 10){
        this.hidePage = false;
      }
      //重置页码为1
      this.currentPage = 1;
      console.log(this.currentPage)
      this.axios.get(this.baseUrl+"product/all/"+this.currentPage+"/"+this.limit)
        .then(res=>{
          console.log(res.data);
          this.products = res.data.data.list;
          this.total = res.data.data.total
        });
    },
    //切换当前页
    handleCurrentChange(val) {
      console.log("当前页："+val);
      this.currentPage = val;
      this.axios.get(this.baseUrl+"product/all/"+this.currentPage+"/"+this.limit)
        .then(res=>{
          console.log(res.data);
          this.products = res.data.data.list;
          this.total = res.data.data.total
        });
    }
  }
}
</script>

<style scoped lang="less">
@import "../../assets/css/element-ui.css";
</style>
